<!DOCTYPE html>
<html class="" lang="en">
	<head>

		{% include 'twig/common/header/include.twig' %}
		<script src="/dev/lib/jquery.form.js"></script>

		<script src="/dev/vendor/define-validate.js"></script>
		<script src="/dev/lib/bootstrap-select/js/bootstrap-select.js" type="text/javascript" charset="utf-8"></script>
		<link
		href="/dev/lib/bootstrap-select/css/bootstrap-select.css" rel="stylesheet">

		<!-- Fine Uploader jQuery JS file-->
		<link href="/dev/lib/fine-uploader/fine-uploader.css" rel="stylesheet">
		<link href="/dev/lib/fine-uploader/fine-uploader-gallery.css" rel="stylesheet">
		<script src="/dev/lib/e-smart-zoom-jquery.min.js"></script>
		<script src="/dev/lib/fine-uploader/jquery.fine-uploader.js"></script>

		<link rel="stylesheet" href="/dev/lib/editor.md/css/editormd.css">
		<script src="/dev/lib/editor.md/editormd.js"></script>

		<style type="text/css">
			.radio-with {
				display: flex;
			}
			.radio-with .radio {
				padding: 8px 12px;
				border-radius: 2px;
				box-sizing: border-box;
				flex: 1;
			}
			.radio-with .radio:focus-within {
				background-color: #eee;
			}
			.qq-gallery.qq-uploader {
				min-height: 90px;
			}
			.qq-gallery.qq-uploader:before {
				top: 25%;
			}
		</style>
	</head>
	<body class="" data-group="" data-page="projects:issues:new" data-project="xphp">
		{% include 'twig/common/body/script.twig' %}

		<section class="has-sidebar page-layout max-sidebar">
			{% include 'twig/common/body/page-left.twig' %}

			<div class="page-layout page-content-body">
				{% include 'twig/common/body/header-content.twig' %}

				<script>
					var findFileURL = "";
				</script>
				<div class="page-with-sidebar">
					<div class="page-with-layout-nav page-with-sub-nav" style="background-color: #fff;">
						<div class="alert-wrapper">
							<div class="flash-container flash-container-page"></div>
						</div>
						<div class="container-fluid container-limited">
							<div class="content" id="content-body">
								<h3 class="page-title">
									创建项目
								</h3>
								<hr>
								<form id="form_add_action" class="form-horizontal issue-form common-note-form js-quick-submit js-requires-input gfm-form " action="/project/main/create" accept-charset="UTF-8" method="post">
									<input name="utf8" type="hidden" value="✓">
									<input type="hidden" name="authenticity_token" value="">
									<div class="form-group">
										<label class="control-label" for="">项目名称
											<i class="required">*</i>
										</label>
										<div class="col-sm-6">
											<input placeholder="请输入名称,最多{{project_name_max_length}}字符" class="form-control" type="text" name="params[name]" id="project_name" maxlength="{{project_name_max_length}}">
											<p id="tip-project_name" class="gl-field-error hide"></p>
										</div>
									</div>


									<div class="form-group">
										<label class="control-label" for="">
											<span>组织
												<i class="required">*</i>
											</span>
										</label>
										<div class="col-sm-6">
											<div class="select2-container">
												<select class="selectpicker js-org" data-live-search="true" name="params[org_id]">
													{% for org in org_list %}
														<option data-tokens="{{org['name']}}" data-org_path="{{org['path']}}" value="{{org['id']}}">{{org['name']}}</option>
													{% endfor %}
												</select>
											</div>
										</div>
									</div>


									<div class="form-group">
										<label class="control-label" for="" title="必须英文字符,最大长度{{project_key_max_length}},创建后不可修改">
											<span>项目Key <i class="required">*</i>
											</span>
										</label>
										<div class="col-sm-6">
											<div class="input-group">
												<span class="input-group-addon" id="basic-addon3">{{root_domain}}<span class="js-org-key"></span>/
												</span>
												<input placeholder="请输入项目Key,最大长度{{project_key_max_length}}" class="form-control" type="text" name="params[key]" id="project_key" maxlength="{{project_key_max_length}}">
											</div>

											<p id="tip-project_key" class="gl-field-error hide"></p>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label" for="project_avatar">
											<span>项目图标</span>
										</label>
										<div class="col-sm-2">
											<input type="hidden" name="params[avatar_relate_path]" id="avatar" value=""/>
											<div id="fine-uploader-gallery"></div>

										</div>
										<div class="col-sm-6">
											<div class="help-block">图片大小被限制为200KB.</div>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label" for="">
											项目类型
											<i class="required">*</i>
										</label>
										<div class="col-sm-6 radio-with">
											{% for type_id,type_item in full_type %}
												<div class="radio">
													<label>
														<input type="radio" name="params[type]" value="{{type_id}}">

														<span style="font-weight: bolder;" title="{{type_item['type_desc']}}">{{type_item['type_name']}}</span>
														<div style="color:#999999;">

														</div>
													</label>
												</div>
											{% endfor %}
										</div>
									</div>

									<div class="row">
										<div class="col-sm-6">
											<div class="form-group issue-assignee">
												<label class="control-label col-lg-4" for="project_lead">项目负责人
													<i class="required">*</i>
												</label>
												<div class="col-lg-8 col-sm-10">
													<div class="issuable-form-select-holder">
														<input type="hidden" name="params[lead]" id="project_lead"/>
														<div class="dropdown ">
															<button class="dropdown-menu-toggle js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search" type="button" data-first-user="sven" data-null-user="true" data-current-user="true" data-project-id="" data-selected="null" data-field-name="params[lead]" data-default-label="Assignee" data-toggle="dropdown">
																<span class="dropdown-toggle-text is-default">项目负责人</span>
																<i class="fa fa-chevron-down"></i>
															</button>
															<div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit">
																<div class="dropdown-title">
																	<span>选择负责人</span>
																	<button class="dropdown-title-button dropdown-menu-close" aria-label="Close" type="button">
																		<i class="fa fa-times dropdown-menu-close-icon"></i>
																	</button>
																</div>
																<div class="dropdown-input">
																	<input type="search" id="" class="dropdown-input-field" placeholder="Search" autocomplete="off"/>
																	<i class="fa fa-search dropdown-input-search"></i>
																	<i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
																</div>
																<div class="dropdown-content "></div>
																<div class="dropdown-loading">
																	<i class="fa fa-spinner fa-spin"></i>
																</div>
															</div>
														</div>
													</div>
													<a class="assign-to-me-link " href="#">赋予给我</a>
													<p id="tip-project_lead" class="gl-field-error hide"></p>
												</div>
											</div>

										</div>
										<div class="col-lg-6"></div>
									</div>

									<div class="form-group">
										<label class="control-label" for="project_description">项目简述
											<span class="light"></span>
										</label>
										<div class="col-sm-10">
											<textarea placeholder="几句话概述你的项目" class="form-control" rows="3" maxlength="250" name="params[description]" id="project_description"></textarea>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label" for="project_detail">项目详情</label>
										<div class="col-sm-10">
											<div id="editor_md">
												<textarea style="display:none;" name="params[detail]" id="project_detail"></textarea>
											</div>
											<div class="help-block">
												<a href="https://www.runoob.com/markdown/md-tutorial.html" target="_blank">Markdown写作帮助</a>
											</div>
										</div>
									</div>

									<hr>

									<div class="form-group hide">
										<label class="control-label" for="project_url">
											<span>URL</span>
										</label>
										<div class="col-sm-10">
											<input placeholder="URL" class="form-control" type="text" name="params[url]" id="projectUrl">
										</div>
									</div>



									<div class="form-actions text-right" style="position: relative; z-index: 10;">
										<input type="submit" name="commit" value="创建项目" class="btn btn-create disabled js-key-enter">
										<a class="btn btn-cancel" href="javascript:history.go(-1)" style="float: none">取消</a>
									</div>
								</form>


							</div>
						</div>
					</div>
				</div>

			</div>
		</section>


		<!-- Fine Uploader Gallery template
				    ====================================================================== -->
		<script type="text/template" id="qq-template-gallery">
			<div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="">
				<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
					<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
				</div>
				<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
					<span class="qq-upload-drop-area-text-selector"></span>
				</div>
				<div class="qq-upload-button-selector qq-upload-button">
					<div>点击上传</div>
				</div>
				<span class="qq-drop-processing-selector qq-drop-processing">
					<span>Processing dropped files...</span>
					<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
				</span>
				<ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
					<li>
						<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
						<div class="qq-progress-bar-container-selector qq-progress-bar-container">
							<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
						</div>
						<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
						<div class="qq-thumbnail-wrapper">
							<a href="javascript:;" class="qq-file-link qq-upload-file-url">
								<img class="qq-thumbnail-selector" qq-max-size="198" qq-server-scale>
							</a>
						</div>
						<button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
						<button type="button" class="qq-upload-retry-selector qq-upload-retry">
							<span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
							重试
						</button>

						<div class="qq-file-info">
							<div class="qq-file-name">
								<span class="qq-upload-file-selector qq-upload-file"></span>
								<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
							</div>
							<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
							<span class="qq-upload-size-selector qq-upload-size"></span>
							<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
								<span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
							</button>
							<button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
								<span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
							</button>
							<button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
								<span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
							</button>
						</div>
					</li>
				</ul>

				<dialog class="qq-alert-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">Close</button>
					</div>
				</dialog>

				<dialog class="qq-confirm-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">否</button>
						<button type="button" class="qq-ok-button-selector">是</button>
					</div>
				</dialog>

				<dialog class="qq-prompt-dialog-selector">
					<div class="qq-dialog-message-selector"></div>
					<input type="text">
					<div class="qq-dialog-buttons">
						<button type="button" class="qq-cancel-button-selector">取消</button>
						<button type="button" class="qq-ok-button-selector">好的</button>
					</div>
				</dialog>
			</div>
		</script>


		<script>


			$(function () {
				var editor = editormd({
					id: "editor_md",
					placeholder: "这里可以填写项目的详细说明,以便于其他新成员快速了解项目.",
					width: "100%",
					height: 240,
					markdown: "",
					path: '/dev/lib/editor.md/lib/',
					imageUpload: true,
					imageFormats: [
						"jpg",
						"jpeg",
						"gif",
						"png",
						"bmp",
						"webp"
					],
					imageUploadURL: "/issue/detail/editormd_upload",
					tocm: true, // Using [TOCM]
					emoji: true,
					saveHTMLToTextarea: true,
					toolbarIcons: "custom",
					autoFocus: false
				});


				$("input[name='params[type]']:eq(0)").attr("checked", 'checked');

				$('#fine-uploader-gallery').fineUploader({
					template: 'qq-template-gallery',
					multiple: false,
					request: {
						endpoint: '/projects/upload' + '?_csrftoken=' + encodeURIComponent(document.getElementById('csrf_token').value)
					},
					deleteFile: {
						enabled: false
					},
					retry: {
						enableAuto: true
					},
					validation: {
						allowedExtensions: [
							'jpeg', 'jpg', 'gif', 'png'
						],
						sizeLimit: 1024 * 200
					},
					callbacks: {
						onComplete: function (id, fileName, responseJSON) { // console.log(responseJSON);
							if (responseJSON.error == '') {
								$('#avatar').val(responseJSON.relate_path);
							}
						}
					}
				});

				var add_options = {
					beforeSubmit: function (arr, $form, options) {
						return true;
					},
					success: function (resp, textStatus, jqXHR, $form) {
						if (!form_check(resp)) {
							return;
						}
						if (resp.ret == '200') {
							// console.log(resp)
							// notify_error(resp.msg);
							location.href = '/' + resp.data.path;
						} else {
							notify_error(resp.msg);
						}
					},
					type: "post",
					dataType: "json",
					clearForm: false,
					resetForm: false,
					timeout: 3000
				};

				$('#form_add_action').submit(function () {
					$(this).ajaxSubmit(add_options);
					return false;
				});

				$('#project_name').bind('input propertychange', function () {
					if ($(this).val().length > 0) {
						$("input[name='commit']").removeClass("disabled");
					} else {
						$("input[name='commit']").addClass("disabled");
					}
				});
				var defaultPath = $($(".js-org").find("option")[0]).attr("data-org_path");
				$('.js-org-key').text(defaultPath);
				$(".js-org").on("changed.bs.select", function (ev, v) {
					var path = $(".js-org").find("option:selected").attr("data-org_path");
					$(".js-org-key").text(path);
				})
			});
		</script>
	</body>

</html>
